<template>
	<div class="content">
		<div class="content-bar">
			<div class="bar-right">
				<p>Sort by:</p>
				<p>Default</p>
				<p>price</p>
			</div>
		</div>
		
		<div class="content-block">
			<div class="block-l">
				<p class="l-p1">PRICE:</p>
				<ul>
					<li>
						<a class="price-actived" href="#">All</a>
					</li>
					<li v-for='priceItem of priceFillter' :key='priceItem.id'>
						<a class="price-actived" href="#">{{priceItem.startPrice}} - {{priceItem.endPrice}}</a>
					</li>
				</ul>
			</div>
			<div class="block-r">
				<router-link 
							tag='div' 
							class="r-child" 
							v-for='item of proDuctList' 
							:key='item.id' 
							:to="'/detail/' + item.id"
				>
					<div class="child-top">
						<img class="shop-img" v-lazy="item.product_img" />
					</div>
					<div class="child-center"><p>{{item.product_name}}</p></div>
					<div class="child-bottom">
						<p>￥{{item.product_price}}元</p>
						<a href="#">加入购物车</a>
					</div>
				</router-link>
			</div>
			<div class="clear"></div>
		</div>
		
	</div>
</template>

<script>
	export default {
		name: 'common-content',
		props: {
			proDuctList: Array,
			priceFillter: Array
		}
	}
</script>

<style lang="stylus" scoped>
	.content
		width:1200px
		margin:0 auto
		padding-top:30px
		.content-bar
			height:54px
			background:#fff
			position:relative
			.bar-right
				width:240px
				height:54px
				position:absolute
				right:0
				top:0
				text-align:center
			.bar-right p
				display:inline-block
				line-height:54px
				font-size:15px
				color:#605f5f
				margin:0 8px 0 8px
		.clear
			clear:both
		.content-block
			margin-top:20px
			.block-l
				float:left
				width:180px
				margin-top:14px
				.l-p1
					color:#605f5f
					font-weight:bold
					font-size:18px
					margin-left:12px
			.block-l ul 
				margin:18px 0 0 12px
			.block-l ul li a
				dislya:block
				padding:4px 0 4px 10px
				color:#605f5f
				line-height:56px
				font-size:16px
			.block-l .price-actived
				border-left:3px #EE7A23 solid
			.block-r
				float:right
				width:1010px
				.r-child
					width:240px
					border:2px #E9E9E9 solid
					float:left
					margin:14px 0 0 7px
					.child-top
						width:240px
						height:238px
						.shop-img
							width:100%
					.child-center
						width:240px
						height:50px
						background:#fff
					.child-center p
						color:#605f5f
						line-height:50px
						font-size:15px
						font-weight:bold
						margin:0 0 0 16px
					.child-bottom
						width:240px
						height:100px
						background:#fff
					.child-bottom p
						font-size:18px
						color:#d1434a
						margin:0 0 20px 12px
					.child-bottom a
						display:block
						padding:16px 4px
						border:1px #d1434a solid
						color:#d1434a
						font-weight:bold
						border-radius:2px
						text-align:center
						margin-left:8px
						margin-right:8px
</style>
